<template>
  <div
    class="product-card-video"
    :style="{ width: videoState.play ? '480px' : '140px', height: videoState.play ? '320px' : '140px' }"
  >
    <video
      ref="videoRef"
      :src="props.data?.file_url"
      :poster="DefaultImage"
      :controls="videoState.play"
      @loadedmetadata="videoState.loaded = true"
      @pause="videoState.play = false"
    />
    <div v-if="videoState.loaded && !videoState.play" class="product-card-video-mask" @click="handlePlay">
      <div class="product-card-video-mask--play">
        <div class="product-card-video-mask--play__button"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

import DefaultImage from "@/assets/images/goods_img.webp";

const props = defineProps<{
  // 初始化请求队列 id
  queueId?: string;
  // 表单项动态列数
  span: number;
  // 编辑状态
  editor: boolean;
  // 回显数据
  data: Record<string, any>;
}>();

const emits = defineEmits<{
  play: [];
}>();

const videoRef = ref<HTMLVideoElement>();

const videoState = reactive({
  loaded: false,
  play: false
});

const handlePlay = () => {
  videoRef.value?.play().then(() => {
    videoState.play = true;
    emits("play");
  });
};
</script>

<style scoped lang="scss">
.product-card-video {
  position: relative;
  width: 140px;
  height: 140px;
  &-mask {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    &--play {
      width: 20px;
      height: 20px;
      border: 1px solid white;
      border-radius: 50%;
      &__button {
        border: 8px solid transparent;
        border-left-color: white;
        transform: translate(8px, 2px);
      }
    }
  }
  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    &:focus {
      outline: none;
    }
  }
}
</style>
